<template>
  <div class="container" v-if="finish">
    <van-nav-bar :border="false">
      <template #left>
        <van-icon :name="require('@/assets/images/message.png')" size="24" @click="goTo('/messages')" />
      </template>
      <template #right>
        <van-icon :name="require('@/assets/images/setting.png')" size="24" @click="goTo('/member/setting')" />
      </template>
    </van-nav-bar>
    <div class="user-info" @click="goTo('/member/profile')">
      <div class="user-avatar"><img :src="userInfo ? userInfo.avatar : require('@/assets/images/avatar.png')" alt=""></div>
      <div class="user-body" v-if="!userInfo">
        <div class="login-placeholder" >请登录</div>
      </div>
      <div class="user-body" v-else>
        <div class="user-nickname">{{userInfo.nick_name}}</div>
        <div class="role-name">{{role.name}}</div>
      </div>
      <div class="user-go"><img src="@/assets/images/left-arrow.png" alt=""></div>
    </div>
    <div class="vip-banner" @click="goTo('/role')"><img src="@/assets/images/VIPcenter.png" alt=""></div>
    <div class="user-feature">
      <div class="feature-title">我的账号</div>
      <div class="feature-body">
        <div class="grid-item" @click="goTo('/member/order')">
          <img src="@/assets/images/order.png" alt="">
          <span>我的订单</span>
        </div>
        <div class="grid-item" @click="goTo('/member/promocode')">
          <img src="@/assets/images/invite.png" alt="">
          <span>我的邀请</span>
        </div>
      </div>
    </div>
    <TechSupport></TechSupport>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar';
import Navbar from '@/components/common/Navbar';
import TechSupport from '@/components/common/TechSupport';
import { getUser } from '@/network/member';

export default {
  components: {
    Tabbar,
    Navbar,
    TechSupport,
  },
  data() {
    return {
      finish: false,
      userInfo: '',
      role: {},
    };
  },
  methods: {
    goTo(path, query) {
      this.$router.push({ path, query: query || {} }).catch((err) => {});
    },
  },
  created() {
    if (this.$store.state.user.isLogin) {
      getUser().then((res) => {
        this.userInfo = res.data;
        this.role = res.data.role;
      });
    }
    setTimeout(() => {
      this.finish = true;
    }, 400);
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f3f6f9;
}
.user-info {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 120px;
  padding: 0 16px;
  .user-avatar {
    margin-right: 16px;
    img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }
  }
  .user-body {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 60px;
    flex: 1;
    font-size: 16px;
    .user-nickname {
      font-size: 16px;
      font-weight: 700;
    }
    .role-name {
      color: #666;
      font-size: 12px;
    }
  }
  .user-go {
    width: 12px;
    transform: rotate(180deg);
  }
}
.vip-banner {
  background-color: #fff;
}
.user-feature {
  background-color: #fff;
  padding: 16px;
  .feature-title {
    font-size: 15.2px;
    font-weight: 700;
  }
  .feature-body {
    display: flex;
    margin-top: 12px;
    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 80px;
      height: 80px;
      font-size: 12px;
    }
    img {
      width: 32px;
    }
  }
}
</style>
